<!--
 * @Author: your name
 * @Date: 2020-05-22 15:24:36
 * @LastEditTime: 2020-09-06 09:47:34
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edih
 * @FilePath: \tuyibo\admin\src\components\account\Authority.vue
--> 
<template>
  <div>
      <el-button @click="addOperator">添加管理员</el-button>
      <el-table :data="tableData" border style="width: 100%;margin-top:10px;">
        <el-table-column prop="id" label="id"></el-table-column>
        <el-table-column prop="name" label="昵称"></el-table-column>
        <el-table-column prop="role" label="权限">
          <template slot-scope="scope">
            <el-tag :type="scope.row.role==0?'warning':'info'">{{scope.row.role|roleFilter(roleOptions)}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="editOperator(scope.row)"
            >编辑</el-button>
            <el-button type="text" size="small" @click="deleteOperator(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 15, 20, 25, 30]"
        :page-size="queryData.pagesize"
        :pager-count="7"
        layout="sizes, prev, pager, next,jumper, ->,total"
        :total="count"
      ></el-pagination>
      
      <el-dialog :visible.sync="showDialog" :close-on-click-modal="false" :title="dialogType=='add'?'添加管理员':'修改信息'"
      :before-close="resetEdit">
        <el-form :model="editForm" :rules="rules" ref="form">
          <el-form-item label="id" :label-width="formLabelWidth" v-if="dialogType==='edit'">
            <el-input v-model="editForm.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
            <el-input v-model="editForm.name"></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth" prop="password" v-if="dialogType==='add'">
            <el-input v-model="editForm.password" type="password" show-password></el-input>
          </el-form-item>
           <el-form-item
            label="角色"
            :label-width="formLabelWidth"
            prop="role"
          >
            <el-select v-model="editForm.role" filterable placeholder="请选择角色" style="width:100%">
              <el-option
                v-for="item in roleOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          
          <!-- <el-form-item label="权限" :label-width="formLabelWidth" prop="role">
            <el-input v-model="editForm.role"></el-input>
          </el-form-item> -->
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="resetEdit">取 消</el-button>
          <el-button
            type="primary"
            :loading="button_loading"
             @click="dialogType=='add'?submitAdd('form'):updateOperator('form')"
          >确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "change" }],
        password: [{ message: "请输入密码", trigger: "blur" }],
        role: [{ required: true, message: "请选择角色", trigger: "change" }],
      },
      roleOptions: [
        {
          value: 0,
          label: "admin"
        },
        {
          value: 1,
          label: "operator"
        }
      ],
      dialogType:'add',
      button_loading:false,
      editForm:{
        name:'',
        role:'',
        password:''
      },
      formLabelWidth:"120px",
      showDialog:false,
      queryData: {
        page: 1,
        pagesize: 15
      },
      count: 0,
      tableData: []
    };
  },
  mounted() {
    this.getOperatorList(this.queryData);
  },
  methods: {
    submitAdd(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.axios({
            method: "post",
            url: "/account/addOperator",
            data: this.editForm
          })
            .then(res => {
              if (res) {
                this.resetEdit();
                this.getOperatorList(this.queryData);
                this.$message.success("添加成功");
              } else {
                this.$message.success("添加失败");
              }
            })
            .catch(err => {
              console.log(err);
            });
        } else {
          this.$message.error("请您检查输入内容");
          return false;
        }
      });
    },
    addOperator(){
      this.showDialog=true
      this.dialogType="add"
    },
     // 删除管理员
    deleteOperator(item) {
      this.$confirm(`是否删除 "${item.name}" 专题?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.axios({
          url: "/account/deleteOperator",
          method: "post",
          data: item
        }).then(res => {
          if (res) {
            this.$message({
              type: "success",
              message: "删除成功"
            });
            this.getOperatorList(this.queryData);
          } else {
            this.$message.error("删除失败");
          }
        });
      });
    },

    updateOperator(formName) {
      this.button_loading = true;
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.axios
            .post("/account/updateOperator", this.editForm)
            .then(res => {
              if (res[0] > 0) {
                this.resetEdit();
                this.getOperatorList(this.queryData);
                this.$message.info("更新成功");
              } else {
                this.$message.info("您没有任何更改");
              }
              this.button_loading = false;
            })
            .catch(() => {
              this.$message.error("更新失败");
            });
        }
      });
    },
    resetEdit() {
      this.showDialog = false;
      this.button_loading = false;
      for (var key in this.editForm) {
        this.editForm[key] = "";
      }
    },
  
    editOperator(params) {
      this.showDialog = true;
      this.dialogType="edit"
      Object.assign(this.editForm, params);
    },
    handleCurrentChange(val) {
      this.queryData.page = val;
      this.getOperatorList(this.queryData);
    },

    handleSizeChange(val) {
      this.queryData.pagesize = val;
      this.getOperatorList(this.queryData);
    },
    getOperatorList(data) {
      this.axios
        .post("/account/getOperatorList", data)
        .then(res => {
          this.count = res.count||0;
          this.tableData = res.rows;
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
